<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			img{
				width: 20%;
				/*border: 1px red solid;*/
				 -webkit-box-reflect: below -0.5px -webkit-gradient(linear, 
				 left top, left bottom, 
				 from(transparent),
				  to(rgba(250, 250, 250, 0.8)));	
			}
			
	.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /*  任何宽度都可以 */
    color: black; /* 任何颜色，或透明 */
    overflow:hidden;
    white-space: pre; /* 处理空格 */
   left: 20%;
  /*top: -500px;*/
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    width: 50%;
    content: attr(data-content); /* 伪元素的动态获取内容 */
    overflow:hidden;
    color: #f00;
}
		</style>
	</head>
	
	<body style="background-color: dimgray;">
		<img src="CB8EAC47-AA04-4919-879E-E5C39934547E.png"/>

		
<span class="halfStyle " data-content="常">常</span>
<span class="halfStyle " data-content="路">路</span>
<span class="halfStyle " data-content="善">善</span>
<span class="halfStyle " data-content="恶">恶</span>

<input type="number">
<input type="date">
<input type="color">
<p></p>
	</body>
</html>
